import { getyAxis, getxAxis, getGrid, getColors } from './config/option'
import { setColorOpacity } from '@/utils/colors.js'
// 多折线图
export function line1(renderData, config) {
  if (config.single) {
    renderData = [renderData[0]]
  }

  const xAxis = renderData[0].data.map(item => item.name)
  const seriesData = renderData.map((item, index) => {
    const values = item.data.map(d => d.value)
    const series = {
      name: item.legendName,
      type: 'line',
      data: values,
      smooth: true,
      itemStyle: {
        opacity: 0
      }
    }
    if (config.shadow) {
      series.areaStyle = {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: setColorOpacity(getColors()[index], 1) // 0% 处的颜色
            }, {
              offset: 1, color: setColorOpacity(getColors()[index], 0) // 100% 处的颜色
            }]
          }
        }
      }
    }
    return series
  })

  return {
    color: getColors(),
    grid: getGrid(),
    xAxis: getxAxis(xAxis),
    yAxis: getyAxis(),
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        let tooltip = `<strong>${params[0].name}</strong> <br/>`
        params.forEach(item => {
          tooltip += `${item.marker}${item.seriesName}: ${item.value}人 <br>`
        })
        return tooltip
      }
    },
    legend: {
      show: true,
      top: 10,
      right: 10,
      icon: 'rect',
      itemHeight: 5,
      textStyle: {
        color: '#fff',
        itemGap: 5
      }
    },
    series: seriesData
  }
}
